<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 传统模式中 对象的键名都是字符串类型  => 对象的键名能否是其他类型?
    // 答: 对象的键名如果传入其他类型 => 会先隐式转化为字符串 => 再作为对象的键名

    // var obj = {};

    // obj["hello"] = "world";
    // obj[100] = 200;
    // obj[true] = false;
    // obj[null] = undefined;

    // var arr = [1, 2, 3];
    // var o = { a: 1, b: 2 };
    // obj[arr] = arr;
    // obj[o] = o;

    // console.log(obj);


    // for (var key in obj) {
    //     console.log(key, typeof key);
    // }

    // console.log(arr.toString());  // 数字转字符串 默认用逗号拼接
    // console.log(o.toString());  // '[object Object]'


    // JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

    // 为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

    // 如何创建Map数据结构?
    // (1) 通过构造函数Map创建
    // var m = new Map();
    // console.log(m);


    // Map数据结构的属性和方法
    // 属性
    // size  返回Map数据成员的个数(数据的条数)

    // 拓展方法: 
    // set(key,val)  对应键名设置键值(键名键值都可以是任意类型,没有就新增 有就修改)  => 返回值新增数据后Map数据结构本身
    // get(key)      对应键名获取键值   => 不存在就返回undefined
    // delete(key)   对应键名删除数据(单删)  => 删除成功=> true 失败=>false
    // clear()       清除Map结构    => undefined
    // has(key)      判断Map数据是否存在某个键名

    // 遍历方法:
    // forEach(function(item(值),index(键),map){})    

    var m = new Map();

    // 新增
    m.set("hello", "world");
    m.set(100, 200);
    m.set(true, false);
    m.set(null, undefined);

    var arr = [1, 2, 3];
    var o = { a: 1, b: 2 };
    m.set(arr, arr);
    m.set(o, o);

    // var result = m.set("hello", "world")
    // console.log("result:", result);
    // console.log("m:", m);
    // console.log(m === result);

    // 链式操作: (本质:方法返回的是同一类型的数据 原本的/新的)
    // var arr = [1, 2, 3];
    // var result = arr.reverse().reverse().reverse().reverse();
    // console.log(result);

    // var arr = [1, 2, 3];
    // var result = arr.concat(4, 5, 6).concat(7, 8, 9)
    // console.log(result);

    // 拓展: 
    // m.set("hello", "world").set(100, 200).set(true, false).set(null, undefined)


    // 获取
    // console.log(m.get("hello"));
    // console.log(m.get(100));
    // console.log(m.get(true));
    // console.log(m.get(null));
    // console.log(m.get(arr));
    // console.log(m.get(o));
    // console.log(m.get(0));

    // console.log(m.delete("hello"));
    // console.log(m.delete(100));
    // console.log(m.delete(true));
    // console.log(m.delete(null));
    // console.log(m.delete(arr));
    // console.log(m.delete(o));
    // console.log(m.delete(0));


    // console.log(m.clear());

    // console.log(m.has("hello"));
    // console.log(m.has(100));
    // console.log(m.has(true));
    // console.log(m.has(null));
    // console.log(m.has(arr));
    // console.log(m.has(o));
    // console.log(m.has(0));


    m.forEach(function (val, key, map) {
        // console.log(key, val, map);
        console.log(key, val);
    })


    console.log(m);
    console.log(m.size);










</script>

</html>